<template>
  <div class="echarts-wall" :style="echartsStyle">
    <div class="dot-bg" v-if="loading"></div>
    <div class="dot-elastic dotClass" v-if="loading"></div>
    <div class="echarts-content" ref="echartsDom"></div>
  </div>
</template>

<script lang="ts" setup>
/**
 * 圆柱体
 */
// @ts-ignore
import {ElMessage} from "element-plus";
// @ts-ignore
import screenConfig, {getMarkPoint} from '@/components/global/bigscreen/screen_config'

defineOptions({
  name: "Echarts3DCylinder"
});
// @ts-ignore
import {getCurrentInstance, onMounted, ref, watch} from "vue";

const loading = ref<boolean>(false);

const props = defineProps({
      //bar 颜色
      barColor: {
        type: Array, default() {
          return ['#52efff']
        }
      },
      //bar 宽度
      barWidth: {
        type: Number, default: screenConfig.barWidth,
      },
      //上下展示层叠加
      barStack: {type: Boolean, default: false},
      //单一分类是的bar 处理itemStyle
      singBaseModel: {type: Boolean, default: false},
      //竖立显示名称
      erectName: {type: Boolean, default: false},
      //显示legend
      legendShow: {type: Boolean, default: false},
      legendOrient: {type: String, default: 'vertical'},//vertical
      legendLeft: {type: String, default: 'left'},//vertical
      //显示数据值
      seriesLabelShow: {type: Boolean, default: false},
      //值的位置
      seriesLabelPosition: {type: String, default: 'top'},
      //值的位置
      seriesLabelColor: {type: String, default: 'red'},
      //显示y轴value值
      yAxisLabelShow: {type: Boolean, default: false},
      //y轴分割线
      yAxisSplitLineShow: {type: Boolean, default: false},
      //y轴分割线颜色
      yAxisSplitLineColor: {type: String, default: '#FFF'},
      //y轴分割线样式
      yAxisSplitLineType: {type: String, default: 'solid'},
      //y轴单位
      yAxisSplitValueUit: {type: String, default: ''},
      //y轴小刻度显示
      yAxisAxisTick: {type: Boolean, default: false},
      //y轴显示
      yAxisLineShow: {type: Boolean, default: false},
      //y轴样式
      yAxisLineType: {type: String, default: 'solid'},
      yAxisLineColor: {type: String, default: 'red'},
      //x轴
      xAxisLineColor: {type: String, default: 'red'},
      //x轴小刻度显示
      xAxisAxisTick: {type: Boolean, default: false},
      //x轴分割线
      xAxisSplitLineShow: {type: Boolean, default: false},
      //x轴分割线颜色
      xAxisSplitLineColor: {type: String, default: '#FFF'},
      //y轴分割线样式
      xAxisSplitLineType: {type: String, default: 'solid'},
      //x轴倾斜度
      xAxisRotate: {type: Number, default: 0},
      //x轴样式
      xAxisLineType: {type: String, default: 'solid'},
      //x轴显示
      xAxisLineShow: {type: Boolean, default: false},
      //x轴name显示
      xAxisLabelShow: {type: Boolean, default: false},
      showBackground: {type: Boolean, default: false},
      fontColor: {type: Object, default: {x: screenConfig.nameColor}},
      title: {
        type: Object, default: function () {
          return {}
        }
      },
      grid: {
        type: Object, default: function () {
          return {
            left: '10',
            top: '10',
            right: '10',
            bottom: '20'
          }
        }
      },
      url: {
        type: String, default: ''
      },
      params: {
        type: Object, default: {}
      }
    }
);
// dom 组件
const echartsDom = ref<any>(null);

const echartsStyle = ref<any>({});

// @ts-ignore
let {proxy} = getCurrentInstance()

//
let myEcharts: any = null;

onMounted(() => {
  initEcharts()
})

//监听查询条件
watch(() => props.params, () => {
  initEcharts();
})
const initEcharts = () => {
  getData().then((option: any) => {
    myEcharts = proxy.$echarts.init(echartsDom.value);
    if (myEcharts) {
      myEcharts.clear();
      myEcharts.setOption(option)
    }
  });
}
// x轴属性
const xAxis = (xData: any) => {
  let axis = {
    type: 'category',
    boundaryGap: false, // 紧挨边缘
    axisTick: {
      // x轴上的小刻度
      show: props.xAxisAxisTick
    },
    splitLine: {
      // 网格线
      show: props.xAxisSplitLineShow,
      lineStyle: {
        type: props.xAxisSplitLineType, // dotted 虚线 solid 实线
        color: props.xAxisSplitLineColor
      }
    },
    axisLine: {
      show: props.xAxisLineShow,
      lineStyle: {
        type: props.xAxisLineType,
        color: props.xAxisLineColor
      }
    },
    axisLabel: {
      show: props.xAxisLabelShow,
      // x轴样式
      margin: 5, // x轴距离文字距离
      interval: 0, //显示所有X轴信息
      rotate: props.xAxisRotate, //倾斜角度
      textStyle: {
        color: props.fontColor.x,
        fontSize: screenConfig.fontSizeX
      }, formatter: function (value: string, index: number) {
        if (props.erectName) {
          let str = value.split("");
          return str.join("\n");
        } else {
          return value;
        }
      }
    },
    data: xData
  }
  return axis;
}
/**
 * y轴属性
 */
const yAxis = () => {
  return {
    name: '',
    nameTextStyle: {
      color: screenConfig.yNameColor,
      fontSize: screenConfig.yNameFontSize,
    },
    type: 'value',
    splitLine: {
      // 网格线
      show: props.yAxisSplitLineShow,
      lineStyle: {
        type: props.yAxisSplitLineType, // dotted 虚线 solid 实线
        color: props.yAxisSplitLineColor
      }
    },
    axisLine: {
      show: props.yAxisLineShow,
      lineStyle: {
        type: props.yAxisLineType,
        color: props.yAxisLineColor
      }
    },
    axisTick: {
      show: props.yAxisAxisTick
    },
    axisLabel: {
      show: props.yAxisLabelShow,
      //y 轴样式
      formatter: (value: any, index: any) => {
        if (props.yAxisSplitValueUit === '') {
          if (value >= 10000) {
            return `${(value / 10000).toFixed(1)}W`
          } else if (value >= 1000) {
            return `${(value / 1000).toFixed(1)}K`
          }
        }
        return `${(value)}`
      },
      color: '#A1A7B3',
      fontSize: 14,
      textStyle: {
        color: screenConfig.valueColor
      }
    }
  }
}

const tooltip = (i: number) => {
  let formatter = '{b} : {c}';
  if (i > 1) {
    formatter = '';
  }
  return {
    show: true,
    trigger: 'item', //axis , item
    backgroundColor: 'RGBA(0, 49, 85, 1)',
    borderColor: 'rgba(0, 151, 251, 1)',
    borderWidth: 1,
    borderRadius: 0,
    textStyle: {
      color: '#BCE9FC',
      fontSize: 16,
      align: 'left',
    },
    formatter,

  }
}

const legend = () => {
  return {
    show: props.legendShow,
    orient: props.legendOrient,
    left: props.legendLeft,
    textStyle: {
      fontSize: screenConfig.legendFontSize,
      fontFamily: screenConfig.legendFontFamily,
      color: screenConfig.legendFontColor,
    },
  }
}

const getData = () => {
  return new Promise((resolve, reject) => {
    if (props.url) {
      loading.value = true;
      proxy.$http.post(props.url, props.params)
          .then((apiResponse: any) => {
            if (apiResponse.success || apiResponse.data) {
              //x轴数据
              let xData: any = [];

              let yValue: any = [];

              //series
              let series: any = [];
              //获取的数据
              let echartsData = apiResponse.data.echartsData;
              let i = 0;
              Object.keys(echartsData).forEach((key: string) => {
                    if (i === 0) {
                      for (let x = 0; x < echartsData[key].length; x++) {
                        let data = echartsData[key][x];
                        xData.push(data.name);
                        yValue.push(data.value);
                      }
                      let mSeries: any = {
                        name: '上部圆',
                        type: 'pictorialBar',
                        silent: true,
                        symbolSize: [props.barWidth, props.barWidth / 2],
                        symbolOffset: [0, -5],
                        symbolPosition: 'end',
                        z: 12,
                        label: {
                          normal: {
                            show: props.seriesLabelShow,
                            position: 'top',
                            fontSize: 15,
                            fontWeight: 'bold',
                            color: props.barColor[0],
                          },
                        },
                        color: props.barColor[0],
                        data: yValue,
                      };
                      series.push(mSeries);
                      series.push({
                        name: '底部圆',
                        type: 'pictorialBar',
                        silent: true,
                        symbolSize: [props.barWidth, props.barWidth / 2],
                        symbolOffset: [0, 5],
                        z: 12,
                        color: props.barColor[0],
                        data: yValue,
                      });
                      series.push({
                        name: '设备数量',
                        showBackground: props.showBackground,
                        type: 'bar',
                        barWidth: props.barWidth,
                        barGap: '10%', // Make series be overlap
                        barCateGoryGap: '10%',
                        itemStyle: {
                          normal: {
                            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                              {
                                offset: 0,
                                color: 'rgba(210,210,210,0.3)',
                              },
                              {
                                offset: 1,
                                color: props.barColor[0],
                              },
                            ]),
                            opacity: 0.8,
                          },
                        },
                        data: yValue,
                      });

                      let option: any = {
                        backgroundColor: 'transparent',
                        legend: legend(),
                        tooltip: tooltip(i),
                        xAxis: xAxis(xData),
                        yAxis: yAxis(),
                        title: props.title,
                        grid: props.grid,
                        series
                      };
                      if (props.yAxisSplitValueUit != '') {
                        option.yAxis.name = props.yAxisSplitValueUit
                      }


                      loading.value = false;
                      resolve(option);
                    }
                  }
                  ,
                  (err: any) => {
                    reject(err);
                  }
              )
            }
          })
    } else {
      reject("无法获取请求地址");
    }
  })
}
</script>